<template>
<div class="tab">
 <div class="tab1">
    <div class="tabItem" v-for="item in listTab1" :key="item.p1">
      <img :src="item.src" alt="" />
      <p class="p1">{{ item.p1 }}</p>
      <p>{{ item.p2 }}</p>
      <p>{{ item.p3 }}</p>
      <p>{{ item.p4 }}</p>
    </div>
  
  </div>
    
    <tabs-img :listItem="listItem"/>
</div>
 
</template>
<script>
import TabsImg from "./tabsimg"
export default {
  name: "TabBar",
  components: {
    TabsImg
  },
  data() {
    return {
            listItem: ["收入提升26%", "效率提高80%", "节省成本21%", "收入提升26%"],

      listTab1: [
        {
          src:
            "https://www.guohuihr.cn/uploadfile/2020/1113/295ff0893b15292.png",
          p1: "6要素选拔",
          p2: "选拔标准   效果评估",
          p3: "招聘计划   渠道选择",
          p4: "素质测评   制度与流程",
        },
        {
          src:
            "https://www.guohuihr.cn/uploadfile/2020/1113/16052557611aa559.png",
          p1: "风险把控",
          p2: "减少可避免风险   提高管理水平",
          p3: "完善控制体系      风险学习机制",
          p4: "加强沟通工作      完善内部体系",
        },
        {
          src:
            "https://www.guohuihr.cn/uploadfile/2020/1113/03e130a610fc108.png",
          p1: "组织面试",
          p2: "面试报道抽签   候考",
          p3: "退场                 答题",
          p4: "进入考场         公布成绩",
        },
        {
          src:
            "https://www.guohuihr.cn/uploadfile/2020/1113/1605255740247c58.png",
          p1: "入职手续办理",
          p2: "配备办公用品        安排座位",
          p3: "填写《资产配备清单",
          p4: "准备资料和表单，制作工牌.",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>

.tab{
    width: 100%;

    display: flex;
    flex-direction: column;


.tab1 {
  display: flex;
  padding-top: 30px;
  .tabItem {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .p1{
      font-weight: bold;
    }
    img {
      width: 80%
    }
  }
}
}
</style>
